<template>
  <!-- 条件渲染，确保 form 和 fileList 都已初始化 -->
  <div v-if="form && form.id && fileList">
    <!-- 导航栏 -->
    <div class="nav">
      <div>店铺管理</div>
      <!-- 保存按钮，点击时触发 saveBtn 方法 -->
      <el-button type="primary" @click="saveBtn">保存店铺信息</el-button>
    </div>
    <!-- 表单组件，绑定数据模型 form -->
    <el-form :model="form" label-width="auto">
      <!-- 店铺名称输入框 -->
      <el-form-item label="店铺名称">
        <el-input v-model="form.name" />
      </el-form-item>
      <!-- 公告输入框，多行文本 -->
      <el-form-item label="公告">
        <el-input v-model="form.bulletin" type="textarea" :rows="5" />
      </el-form-item>
      <!-- 店铺头像上传 -->
      <el-form-item label="店铺头像" prop="avatar">
        <el-upload
            class="avatar-uploader"
            :action="serverUrl + '/api/shop/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <!-- 如果有头像，显示头像图片 -->
            <img v-if="form.avatar" :src="serverUrl + form.avatar" class="avatar" />
            <!-- 如果没有头像，显示上传图标 -->
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
      </el-form-item>
      <!-- 店铺介绍图上传 -->
      <el-form-item label="店铺介绍图" prop="pics">
        <el-upload
          v-model:file-list="fileList"
          :action=" 'api/shop/upload'"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <!-- 起送价格输入框 -->
      <el-form-item label="起送价格">
        <el-input v-model="form.minPrice" type="number" />
      </el-form-item>
      <!-- 送达时间输入框 -->
      <el-form-item label="送达时间">
        <el-input v-model="form.deliveryTime" type="number" />
      </el-form-item>
      <!-- 配送描述输入框 -->
      <el-form-item label="配送描述">
        <el-input v-model="form.description" />
      </el-form-item>
      <!-- 店铺评分输入框 -->
      <el-form-item label="店铺评分">
        <el-input v-model="form.score" type="number" />
      </el-form-item>
      <!-- 店铺销量输入框 -->
      <el-form-item label="店铺销量">
        <el-input v-model="form.sellCount" type="number" />
      </el-form-item>
      <!-- 店铺活动复选框 -->
      <el-form-item label="店铺活动">
        <el-checkbox-group v-model="form.supports">
          <el-checkbox value="单人精彩套餐" name="type">
            单人精彩套餐
          </el-checkbox>
          <el-checkbox value="VC无限橙果汁全场8折" name="type">
            VC无限橙果汁全场8折
          </el-checkbox>
          <el-checkbox value="在线支付满28减5" name="type">
            在线支付满28减5
          </el-checkbox>
          <el-checkbox value="特价饮品八折抢购" name="type">
            特价饮品八折抢购
          </el-checkbox>
          <el-checkbox value="中秋特惠" name="type">
            中秋特惠
          </el-checkbox>
          <el-checkbox value="国庆特价" name="type">
            国庆特价
          </el-checkbox>
          <el-checkbox value="春节1折折扣" name="type">
            春节1折折扣
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- 营业时间选择器 -->
      <el-form-item label="营业时间" style="width: 450px;">
        <el-time-picker
          v-model="form.date"
          is-range
          range-separator="至"
          start-placeholder="Start time"
          end-placeholder="End time"
        />
      </el-form-item>
    </el-form>
  </div>

  <!-- 图片预览弹窗 -->
  <el-dialog v-model="dialogVisible">
    <img w-full class="dialog-img" :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>
<script setup>
import { ref } from 'vue'; // 导入 Vue 的 ref 功能
import { Info, edit } from '@/views/api/shop'; // 导入获取店铺信息和编辑店铺信息的 API
import { serverUrl } from '@/views/utils/common'; // 导入服务器地址
import { ElMessage } from 'element-plus'; // 导入消息提示组件
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'; // 导入 Element Plus 图标

// 定义店铺信息表单数据
const form = ref({
  id: '', // 店铺 ID
  name: '', // 店铺名称
  bulletin: '', // 公告
  avatar: '', // 店铺头像
  pics: '', // 店铺介绍图
  minPrice: '', // 起送价格
  deliveryTime: '', // 送达时间
  description: '', // 配送描述
  score: '', // 店铺评分
  sellCount: '', // 店铺销量
  supports: [], // 店铺活动
  date: '' // 营业时间
});

// 定义店铺多图文件列表
const fileList = ref(null);

// 定义图片预览弹窗的显示状态
const dialogVisible = ref(false);

// 定义图片预览的 URL
const dialogImageUrl = ref('');

// 获取店铺信息的方法
const getShopInfo = async () => {
  const res = await Info(); // 调用 API 获取店铺信息
  form.value = res.data; // 将返回的店铺信息赋值给 form
  fileList.value = res.data.pics.map((item) => { // 将返回的图片列表转换为文件列表
    return { name: item, url: serverUrl + item };
  });
};

// 调用 getShopInfo 方法获取店铺信息
getShopInfo();

// 保存店铺信息的方法
const saveBtn = async () => {
  // 浅拷贝数据
  const formData = { ...form.value };
  // 修改部分不满足提交格式的数据，重组提交数据
  formData.date = JSON.stringify(formData.date);
  formData.supports = JSON.stringify(formData.supports);
  formData.avatar = formData.avatar.slice(formData.avatar.lastIndexOf('/') + 1);
  const pics = fileList.value.map((item) => {
    // 如果没有 response 证明这张图没有修改，直接用 item.name 做截取
    // 如果有 response 证明这张图修改了，用 item.response.imgUrl 做截取
    let filename = item.name;
    if (item.response) {
      filename = item.response.imgUrl;
    }
    let index = filename.lastIndexOf('/');
    return filename.slice(index + 1);
  });

  formData.pics = JSON.stringify(pics);

  let { code, msg } = await edit(formData); // 调用 API 编辑店铺信息
  if (code === 0) {
    ElMessage.success(msg); // 提示成功信息
    getShopInfo(); // 刷新页面，重新请求默认数据，重新渲染页面
  } else {
    ElMessage.error(msg); // 提示错误信息
  }
};

// 店铺头像上传前的校验
const beforeAvatarUpload = (rawFile) => {
  if (!rawFile.type.includes('image')) { // 检查文件类型是否为图片
    ElMessage.error('店铺头像必须是图片');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) { // 检查文件大小是否超过 2MB
    ElMessage.error('图片大小不能超过2MB!');
    return false;
  }
  return true;
};

// 点击图片预览的方法
const handlePictureCardPreview = (res) => {
  dialogImageUrl.value = res.url; // 设置预览图片的 URL
  dialogVisible.value = true; // 打开预览弹窗
};

// 删除图片的方法
const handleRemove = (res) => {
  console.log(res); // 打印删除的图片信息
};

// 店铺头像上传成功后的回调
const handleAvatarSuccess = (res) => {
  form.value.avatar = res.imgUrl; // 更新店铺头像的 URL
};
</script>
<style scoped lang="scss">
// 导航栏样式
.nav {
  width: 100%; // 宽度为 100%
  height: 50px; // 高度为 50px
  background-color: #fff; // 背景颜色为白色
  display: flex; // 使用 flex 布局
  justify-content: space-between; // 子元素两端对齐
  align-items: center; // 垂直居中
  padding: 0 20px; // 左右内边距为 20px
  box-sizing: border-box; // 盒模型包含内边距
  margin-bottom: 20px; // 下外边距为 20px
  border-bottom: 1px solid #ccc; // 底边框为灰色
}

// 店铺头像上传器的样式
:deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color); // 边框为虚线
  border-radius: 6px; // 边框圆角
  cursor: pointer; // 鼠标指针为手形
  position: relative; // 相对定位
  overflow: hidden; // 隐藏溢出部分
  transition: var(--el-transition-duration-fast); // 过渡动画
}

// 店铺头像上传器的图标样式
:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px; // 字体大小为 28px
  color: #8c939d; // 图标颜色
  width: 178px; // 图标宽度
  height: 178px; // 图标高度
  text-align: center; // 文本居中
}

// 店铺头像图片的样式
.avatar {
  width: 178px; // 图片宽度
  height: 178px; // 图片高度
}

// 图片预览的样式
.dialog-img {
  width: 100%; // 图片宽度为 100%
}
</style>